<template>
	<view class="continer">
		<!-- 搜索框 -->
		<view>
			<view><input placeholder="输入关键字搜索"/></view>
			<view>
				<image src="../../static/ylovrn/搜索.png"></image>
			</view>
		</view>
		<!-- 考点栏 -->
		<view>
			<view v-for="(item,index) in category"
			:class="index == selectedIndex?'active':''"
			 @click="changeCategory"
			 :data-index="index">
				{{item.name}}
			</view>
		</view>
		<!-- 具体视频 -->
		<view class="list">
			<view v-for="(item,index) in displayVideo()" :key="item.id">
				<view>
					<image :src="item.imgSrc"></image>
				</view>
				<view class="text">
					<view>
						{{item.videoName}}
					</view>
					<view>
						讲师:{{item.videoAuthor}}
					</view>
					<view >
						更新时间：{{item.updateTime}}
					</view>
				</view>
				<view class="number">
					<view>
						<!-- <image src="../../static/眼睛.png"></image> -->
						1000
					</view>
					<view>
						<!-- <image src="../../static/点赞_块.png"></image> -->
						100
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category:[
					{id:1,name:"推荐"},
					{id:2,name:"考点一"},
					{id:3,name:"考点二"},
					{id:4,name:"考点三"},
					{id:5,name:"考点四"}
				],
				selectedIndex:0,
				video:[
					{id:1,videoName:"22材料力学重难点考哪些？",videoAuthor:"北航学长",updateTime:"2021/01/23", imgSrc:"https://img.ixintu.com/upload/jpg/20210524/a4458cc8da837579749d671476d3683b_173283_800_789.jpg!con",categoryId:2},
					{id:2,videoName:"如果考研也有段位？",videoAuthor:"小猪牛哥",updateTime:"2022/01/03",imgSrc:"https://ts1.cn.mm.bing.net/th/id/R-C.80c4df611e57f351c2ad767e4143b366?rik=SxoNH8R01iNmGg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f07-11%2f88664%2fwater_88664_698_698_.png&ehk=joKqmJjUk1wop%2fYJ5X87hc2E%2fcx6w0Gqzvb5QUsimSo%3d&risl=&pid=ImgRaw&r=0",categoryId:2},
					{id:3,videoName:"伸缩与拉力",videoAuthor:"北航学长",updateTime:"2021/01/23",imgSrc:"https://img.51miz.com/preview/element/00/01/16/20/E-1162088-835D9745.jpg",categoryId:4},
					{id:4,videoName:"20数学重难点考哪些？",videoAuthor:"宋老师",updateTime:"2021/10/23",imgSrc:"https://img.zcool.cn/community/01a7da5bcdd113a8012099c804b1ab.jpg@2o.jpg",categoryId:1},
					{id:5,videoName:"物理力学重难点考哪些？",videoAuthor:"顺飞学姐",updateTime:"2023/11/23",imgSrc:"https://img.ixintu.com/upload/jpg/20210524/a4458cc8da837579749d671476d3683b_173283_800_789.jpg!con",categoryId:3},
					{id:6,videoName:"语文重难点考哪些？",videoAuthor:"北航学长",updateTime:"2016/03/24",imgSrc:"https://bpic.588ku.com/element_origin_min_pic/19/03/07/e4edf7dd8c727c6f25c1c26468ec9808.jpg",categoryId:2},
					{id:7,videoName:"如何学好数理化？",videoAuthor:"小样学长",updateTime:"2018/5/29",imgSrc:"https://img.ixintu.com/upload/jpg/20210524/a4458cc8da837579749d671476d3683b_173283_800_789.jpg!con",categoryId:4}
				],
			}
		},
		methods: {
				changeCategory:function(e) {
					var i = e.target.dataset.index
					this.selectedIndex = i;
				},
				displayVideo:function() {
				// 	var that = this;
				// 	return this.video.filter((item)=>{
				// 	    return item.categoryId == that.category[that.selectedIndex].id;
				// 	})
				// },
				var arr = [];
				for(var i = 0;i<this.video.length;i++) {
					if(this.video[i].categoryId == this.category[this.selectedIndex].id)
						arr.push(this.video[i]);
				}
				return arr;
				},
		}
	}
</script>

<style>
	body {
		background-color:#F0EEEF;
	} 
	.continer >view{
		display: flex;
	}
	.continer input{
		font-size: 28rpx;
	}
	/* 搜索 */
	.continer >view:nth-child(1) {
		justify-content: space-between;
		border-radius: 40rpx;
		width: 700rpx;
		margin: 20rpx;
		border:2rpx solid whitesmoke;
	}
	.continer >view:nth-child(1) image{
		width: 40rpx;
		height: 40rpx;
	}
	/* 分类 */
	.continer >view:nth-child(2) {
		justify-content: space-around;
		border:2rpx solid whitesmoke;
		margin: 20rpx;
		border-radius: 40rpx;
	}
	.continer >view:nth-child(2) view{
		text-align: center;
		align-content: center;
		border-radius: 40rpx;
		width: 180rpx;
		height: 50rpx;
		font-size: 30rpx;
		padding-top: 6rpx;
	}
	/* 具体视频类型介绍 */
	.continer >view:nth-child(3) {
		
		margin: 20rpx;
		flex-wrap: wrap;
	}
	.continer >view:nth-child(3) image{
		width: 280rpx;
		height: 240rpx;
		padding: 10rpx;
		border-radius: 40rpx;
	}
	.list >view {
		border:4rpx solid whitesmoke;
		border-radius: 20rpx;
		width: 300rpx;
		height: 480rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
	}
	.text {
		padding: 20rpx;
	}
	.text >view:nth-child(3) {
		color: gray;
	}
	.number {
		display: flex;
		justify-content: space-between;
	}
	.number image {
		width: 10rpx;
		height: 10rpx;
	}
	.active {
		color: white;
		background-color: #E8815E;
	}
</style>
